<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
	<style type="text/css">
	 ::-webkit-scrollbar-thumb {
		  background:#a2a2a2; 
		  border-radius: 10px;
		  height:50%;
		}
		::-webkit-scrollbar{width:6px;}
	</style>
<script>
	$(document).ready(function() {
		
		var str1="";
		var deIds=$("#deIds").val();
		$.ajax({
			async:false,
			url:'/system/org/dept/selectjson/0',
			type:'post',
			dataType:'json',
			success:function(res){
				for(var i=0;i<res.length;i++){
					if(deIds.indexOf(res[i].id)!=-1){
						str1+='<option value="'+res[i].id+'" selected="selected">'+res[i].text.replace(/\s+/g,"")+'</option>';  
					}else{
						str1+='<option value="'+res[i].id+'">'+res[i].text.replace(/\s+/g,"")+'</option>';  
					}
				}
				$("#deptid").html(str1);
			}
		}); 
		
		initFormSelects("superior","/system/org/user/selectjson",$("#superiorId").val());
		
		if($("#userSexId").val()==1){
			$(":radio[name='userSex'][value='1']").attr("checked","checked");  
		}else{
			$(":radio[name='userSex'][value='0']").attr("checked","checked");  
		}
		
	});
</script>
</head>
<body style="overflow-y:scroll">
<input type="hidden" id="superiorId" name="superiorId" th:value="${model.superior}" />
<input type="hidden" id="userSexId" name="userSexId" th:value="${model.userSex}" />
<input type="hidden" id="deIds" name="deIds" th:value="${deptIds}" />
<div class="addemployee-wrap" id="employee-wrap">
	<div class="form-wrap" >
		<form class="layui-form" id="defaultForm" th:action="@{/system/org/user/update}" th:method="post" lay-filter="employee-form">
			<input type="hidden" id="id" name="id" th:value="${model.id}" />
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>登录名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userid" id="userid" disabled="disabled" required th:value="${model.userid}" lay-verify="userid" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>中文名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userName" id="userName" required th:value="${model.userName}" lay-verify="username" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			      <input type="radio" name="userSex" value="1" title="男">
			      <input type="radio" name="userSex" value="0" title="女">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>手机</label>
			    <div class="layui-input-block">
			      <input type="text" name="phoneNumber" required th:value="${model.phoneNumber}" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱</label>
			    <div class="layui-input-block">
			      <input type="text" name="emailAddress" th:value="${model.emailAddress}" placeholder="" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">微信</label>
			    <div class="layui-input-block">
			      <input type="text" name="wechat" placeholder="" th:value="${model.wechat}" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>部门</label>
			    <div class="layui-input-block">
			      	<select id="deptid" name="deptid" lay-verify="deptid" xm-select="dept" xm-select-skin="normal" xm-select-type="1">
			      	</select>
			      	<input type="hidden" id="deptids" name="deptids" lay-verify="dept"/>
			      	<input type="hidden" id="deptName" name="deptName" lay-verify="deptName"/>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>职务</label>
			    <div class="layui-input-block">
			      <input type="text" name="post" required  lay-verify="post" th:value="${model.post}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">上级</label>
			    <div class="layui-input-block">
			      <select name="superior" lay-filter="aihao" id="superior">
			        <option value=""></option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>角色</label>
			    <div class="layui-input-block">
			      <select name="roleid" id="role"  lay-filter="role" lay-verify="role">
						<option value=""></option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">分店</label>
			    <div class="layui-input-block">
			      	<select name="city" id="project" name="project" xm-select="project" xm-select-skin="normal" xm-select-type="1" >
			      	</select>
			    </div>
			</div>
			<!-- <div id="projectRole">
			
			</div>
			<div class="layui-form-item">
				<span id="add-power" class="layui-btn layui-btn-normal" style="margin-left:66px;">添加分店权限</span>
			</div> -->
			<div class="layui-form-item" style="">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
			      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			    </div>
			</div>
		</form>	
	</div>
</div>
</body>
<script th:inline="javascript">

	$(function(){
		layui.config({
		        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
		    }).extend({
		        formSelects: 'formSelects-v3'
		    }).use(['element',"layer","form",'formSelects'], function(){
				var layer=layui.layer,form = layui.form,formSelects = layui.formSelects;
				
				var userRole=[[${userRole}]];
				var defaultValue=userRole.length>0?userRole[0].fkRole:'';
				//初始化权限（角色）下拉  /system/org/role/selectData
				initFormSelectsExt({
					url:'/system/org/role/selectData',
					id:"role",
					defaultValue : defaultValue
				});
				
				form.verify({
				  userid: function(value, item){ //value：表单的值、item：表单的DOM对象
			      	  if(value==""){
				       	  return '登录名不能为空';
				      }
				  }
				,dept: function(value, item){ //value：表单的值、item：表单的DOM对象
			      	  if(value==""){
				       	  return '部门不能为空';
				      }
				  }
				  ,post: function(value, item){ //value：表单的值、item：表单的DOM对象
			      	  if(value==""){
				       	  return '职务不能为空';
				      }
				  }
				  ,username: function(value, item){ //value：表单的值、item：表单的DOM对象
				    if(value==""){
				    	return '用户名不能为空';
				    }else if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
				      return '用户名不能有特殊字符';
				    }
				  },role: function(value, item){ 
			      	  if(value==""){
				       	  return '角色不能为空';
				      }
				  }
				  ,deptid: function(value, item){ //value：表单的值、item：表单的DOM对象
					  var con="";
					  var deptName="";
					  for(var i=0;i<formSelects.value('dept').length;i++){
						  con+=","+formSelects.value('dept')[i].val;
						  deptName+=","+formSelects.value('dept')[i].name;
					  }
					  $("#deptids").val(con.substring(1));
					  $("#deptName").val(deptName.substring(1).replace(/\s+/g,""));
				      //console.log(formSelects.value('dept'))
				  }
				  
				}); 
				//监听提交
				  form.on('submit(formEmployee)', function(data){
					  var flag = true
					  var con="";
					  for(var i=0;i<formSelects.value('project').length;i++){
						  con+=",{\"projectid\":\""+formSelects.value('project')[i].val+"\",\"teamRole\":1}";
					  }
					  if(con != ""){
						  con = con.substring(1);
					  }  
					  if(flag){
						  data.field.roleProject=con;
						  delete data.field["project"];//删除这个属性不参与提交，这个属性在对象中是有的而且是数组类型 如果提交会报错
						  $.post($("#defaultForm").attr('action'), data.field, function(result) {
								window.parent.layer.msg(result.msg);
								closeLayer();
							}, 'json');
					  }
						return false;
				  });
				
			});
		 //添加权限；
		$("#add-power").on("click",function(){
			addTeamList();
			f++;
			layui.use('form', function(){
		    	  var form = layui.form;
		    	  form.render();
		   });
		})
		initTeamList();
		
	 });
	 var f = 0;
	 function initTeamList(){
		var teams = [[${teams}]];
		layui.use('form', function(){
	    	  var form = layui.form;
	    	  var projectIds="1";
	    	  for(var i = 0;i < teams.length;i++){
	    		  projectIds+=teams[i].project.id;
	  		  }
	    	  var list= [[${projectList}]];
	    	  var str="";
			  for(var i = 0;i<list.length;i++){
				  if(projectIds.indexOf(list[i].id)!=-1){
			  	  	str +=' <option value="'+list[i].id+'" selected="selected" >'+list[i].text+'</option>';
				  }else{
					  str +=' <option value="'+list[i].id+'">'+list[i].text+'</option>';
				  }
			  }
			  $("#project").html(str);
			  
			  renderForm();//表单重新渲染，要不然添加完显示不出来新的option 
	   });
	}
	 function addTeamList(){
		var str= '<div class="layui-form-item">'
		    +'<div class="layui-inline" style="margin-right: 0">'
		    +'<label class="layui-form-label"><span class="must-fill">*</span>分店</label>'
		    +'<div class="layui-input-inline" style="width:210px;margin-right: 0">'
		    +' 	<select name="project'+f+'"  lay-filter="project'+f+'" >';
		    var list= [[${projectList}]];
		    for(var i = 0;i<list.length;i++){
		    	str +=' <option value="'+list[i].id+'">'+list[i].text+'</option>';
		    }
		    str+='    </select></div></div>'
		    +'<div class="layui-inline" style="margin-right: 0">'
		    +'<label class="layui-form-label" style="width:36px;padding: 9px 10px 0px 0px;"><span class="must-fill">*</span>角色</label>'
		    +'<div class="layui-input-inline" style="width:210px;margin-right: 0">'
		    +'	<select name="teamRole'+f+'" lay-filter="teamRole'+f+'"  >'
		    +'		<option value="1">负责人</option>'
		    +'		<option value="2">员工</option>'
		    +'    </select>'
		    +'</div></div><i class="layui-icon" onclick=delRole(this)>&#x1006;</i></div>';
		    $("#projectRole").append(str);
		    
		}
	//删除分店权限
	 function delRole(obj){
	 	$(obj).parent().remove();
	 }
</script>
</html>